<!-- 活动列表 -->
<template>
    <view class="page p-re">
        <view class="back bgwhite flexac" :style="{top: menuButtonTop+'px'}">
            <text class="iconfont icon-shouyeT211 black bold" v-if="fromShare == 1" @click="backHome()"></text>
            <text class="iconfont icon-xiangzuo black" v-else @click="back()"></text>
        </view>
        <image :src="imgUrl + 'brgn_bg2.png'" mode="widthFix" class="topImg p-ab"></image>
        <view class="rule h6 white bold t-letter4 flexac" @click="showRule = true" v-if="pageData.rule">活动规则</view>
        <view class="main p-re">
            <view class="bar auto" v-if="pageData.myRecords"></view>
            <view class="myCut p-re m-bot80" v-if="pageData.myRecords">
                <view :style="{backgroundImage:'url(' + imgUrl + 'brgn_tit2.png' + ')'}"
                    class="tit p-ab size34 bold t-letter4 text-center">我的砍价</view>
                <swiper class="wh" :current="current" @change="changeSwiper">
                    <swiper-item v-for="(item,index) in pageData.myRecords" :key="index" @click="toUrl('/activityPage/bargain/bargainDetail?record_id='+item.record_id)">
                        <view class="swiper-item d-flex">
                            <image :src="$imgUrls(item.img)" mode="aspectFill" class="img"></image>
                            <view class="flex-1 p-left10 d-flex f-column j-sb">
                                <view class="name size30 bold ellipsis">{{ item.name }}</view>
                                <view>
                                    <view class="d-flex j-sb m-bot10">
                                        <view class="size22 color_44">已砍<text class="price size22 bold">{{item.bargain_money }}元</text></view>
                                        <view class="size22 color_44">仅差<text class="price size22 bold">{{ item.need_bargain }}元</text></view>
                                    </view>
                                    <u-line-progress :percentage="parseFloat(item.percent)" inactiveColor="#FFDBDE" height="7" :showText="false"></u-line-progress>
                                </view>
                                <!-- 活动倒计时 -->
                                <u-count-down :time="pageData.left_time" @change="onChange">
                                    <view class="d-flex a-center">
                                        <view class="count" v-if="timeData.days">{{ timeData.days }}</view>
                                        <text class="dot size22" v-if="timeData.days">天</text>
                                        <view class="count">{{ timeData.hours<10?'0'+timeData.hours:timeData.hours }}</view>
                                        <text class="dot">:</text>
                                        <view class="count">{{ timeData.minutes<10?'0'+timeData.minutes:timeData.minutes }}</view>
                                        <text class="dot">:</text>
                                        <view class="count">{{ timeData.seconds<10?'0'+timeData.seconds:timeData.seconds }}</view>
                                        <text class="size22 color_44 m-left14">后结束</text>
                                    </view>
                                </u-count-down>
                                <view class="btn size26 white t-letter4 flexac">继续砍价</view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="dots p-ab d-flex j-centert">
                    <view class="dot" :class="{'active': current == index}" v-for="(item,index) in pageData.myRecords" :key="index" @click.stop="current = index"></view>
                </view>
                <view class="label p-ab h7 white text-center">砍价中</view>
            </view>
            <view class="bar auto"></view>
            <view class="freeList p-re">
                <view :style="{backgroundImage:'url(' + imgUrl + 'brgn_tit2.png' + ')'}"
                    class="tit p-ab size34 bold t-letter4 text-center">砍价免费拿</view>
                <view class="d-flex j-sb f-wrap">
                    <view class="item bgwhite bor_radius_8 m-bot30 d-flex f-column j-sb a-center p-bot26" v-for="(item,index) in pageData.goods" :key="index"
                        @click="toUrl('/activityPage/bargain/bargainDetail?act_id='+act_id+'&goods_id='+item.goods_id)">
                        <view class="head h7 text-center line40">已送出<text class="num size26 bold">{{ item.sales_number }}</text>件</view>
                        <view class="h6 color_11 ellipsis text-center">{{ item.name }}</view>
                        <image :src="$imgUrls(item.img)" mode="aspectFill" class="img"></image>
                        <view class="btn size22 white t-letter4 flexac">点击砍价</view>
                    </view> 
                </view>
            </view>
        </view>
        <view class="footBtn size36 white bold t-letter6 flexac" @click="toUrl('/activityPage/bargain/myBargain')">我的砍价</view>

        <!-- 活动规则 -->
        <u-popup :show="showRule" mode="bottom" :round="10" closeable @close="showRule = false">
            <view class="padding30">
                <view class="size32 color_22 bold m-bot30">活动规则</view>
                <view class="botPop">
                    <u-parse :content="pageData.rule" :domain="$imgUrl"></u-parse>
                </view>
            </view>
        </u-popup>

        <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            act_id: '',
            pageData: '',
            imgUrl: this.imgUrl + 'Uploads/diy/img/',
            current: 0,
            timeData: {},
            fromShare: 0,
            menuButtonTop: getApp().globalData.menuButtonObject.top, // 胶囊按钮的top值
            showRule: false,
            showModal: false
        }
    },
    computed: {
        ...mapState(['vid'])
    },
    onLoad(e){
        if(e.act_id) this.act_id = e.act_id
        if(e.fromShare) this.fromShare= e.fromShare
        this.getList()
    },
    methods: {
        getList(){
            this.$http.get({
                url: '/BargainApi/bargainActivity',
                data: {
                    act_id: this.act_id
                }
            }).then(res=>{
                this.pageData = res.data
            })
        },
        changeSwiper(e){
            this.current = e.detail.current
        },
        onChange(e){
            this.timeData = e
        },
        toUrl(url){
			if(!this.vid) return this.showModal = true
			uni.navigateTo({ url })
		}
    }
}
</script>

<style lang="scss" scoped>
.page {    
    background: linear-gradient(0deg, #FFAF6F, #F6583E);
    .back {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        opacity: 0.6;
        position: fixed;
        left: 24rpx;
        z-index: 100;
    }
    .topImg {
        width: 630rpx;
        left: 60rpx;
        top: 158rpx;
    }
    .rule {
        width: 40rpx;
        height: 140rpx;
        background: #FFCB64;
        border-radius: 8rpx 0rpx 0rpx 8rpx;
        writing-mode:vertical-lr;
        text-orientation: upright;
        position: fixed;
        top: 356rpx;
        right: 0;
        z-index: 20;
    }
}
.main {
    padding: 678rpx 30rpx 0 30rpx;
    padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
    .bar {
        width: 482rpx;
        height: 16rpx;   
        background: linear-gradient(0deg, #E20101, #FFE0B6);       
        border-radius: 16rpx 16rpx 0rpx 0rpx;
    }
    .tit {
        width: 406rpx;
        line-height: 76rpx;
        color: #D11616;
        left: 50%;
        margin-left: -203rpx;
        top: -40rpx;
        z-index: 10;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .img {
        width: 240rpx;
        height: 240rpx;
    }
    .myCut {
        height: 360rpx;     
        background: linear-gradient(0deg, #FF704F, #FFE0C4);  
        border: 2rpx solid #FFE6C8;   
        border-radius: 18rpx;
        .swiper-item {  
            padding: 65rpx 40rpx 0 30rpx;     
            .name { color: #901414; }
            .price { color: #FF3942; }
            .count {
                width: 34rpx;
                line-height: 34rpx;   
                background: #FFD0A0;
                color: #810000;
                font-weight: bold;
                text-align: center;
            }
            .dot {
                font-size: 28rpx;
                color: #810000;
                font-weight: bold;
                margin: 0 10rpx;
            }
            .btn {
                width: 372rpx;
                height: 52rpx;     
                background: linear-gradient(0deg, #FF3942, #FF5C63);     
                border: 2rpx solid #FFBC3A;       
                border-radius: 25rpx;
            }
        }
        .dots {
            width: 100%;
            left: 0;
            bottom: 15rpx;
            z-index: 10;
            .dot {
                width: 10rpx;
                height: 10rpx;          
                background: #262626;         
                opacity: 0.45;          
                border-radius: 5rpx;
                margin: 0 8rpx;
                &.active {
                    width: 24rpx;
                    height: 10rpx;
                    background: #fff;
                    opacity: 1;
                    border-radius: 10rpx;
                }
            }
        }
        .label {
            width: 86rpx;
            line-height: 34rpx;         
            background: linear-gradient(-90deg, #F41C26, #FFA35E);
            opacity: 0.9;      
            border-radius: 0rpx 15rpx 15rpx 0rpx;
            left: -4rpx;
            top: 85rpx;
            z-index: 10;
        }
    }
    .freeList {      
        background: linear-gradient(0deg, #FF704F, #FFE0C4); 
        border: 2rpx solid #FFE6C8;
        border-radius: 18rpx;
        padding: 86rpx 20rpx 6rpx 20rpx;
        .item {
            width: 310rpx;
            height: 433rpx;     
            border: 2rpx solid #FFE6C8;
            .head {
                width: 220rpx;
                height: 40rpx;    
                background: #FFD5A7;
                border-radius: 0rpx 0rpx 40rpx 40rpx;
                color: #5B0B00;
                .num { 
                    color: #D11616; 
                    margin: 0 4rpx;
                }
            }
            .btn {
                width: 162rpx;
                height: 46rpx;    
                background: linear-gradient(0deg, #FF3942, #FF5C63);    
                border: 2rpx solid #FFBC3A;
                border-radius: 23rpx;
            }
        }
    }
}
.footBtn {
    width: 500rpx;
    height: 90rpx;  
    background: linear-gradient(-90deg, #F41C26, #FFA35E);
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(135,86,56,0.3); 
    border-radius: 45rpx;
    position: fixed;
    left: 50%;
    margin-left: -250rpx;
    bottom: calc(34rpx + constant(safe-area-inset-bottom));
    bottom: calc(34rpx + env(safe-area-inset-bottom));
    z-index: 20;
}
/deep/ .u-line-progress__line {
    background: linear-gradient(-90deg, #F41C26, #FFB47B);
}
.botPop {
    min-height: 300rpx;
    max-height: 50vh;
    overflow-y: auto;
}
</style>